<!DOCTYPE html>
<html>
<head>
    <title>JSIL Simple WebGL demo</title>

    <script type="text/javascript" src="Files/glMatrix-0.9.5.min.js"></script>
    <script type="text/javascript" src="Files/webgl-utils.js"></script>
</head>
<body onload="onLoad()">
    <style>
      body {
        font-family: Calibri, Tahoma, Verdana, Arial, sans serif;
        font-size: 13pt;
      }
      input {
        font-family: Consolas, Courier New, monospace;
        font-size: 11pt;
      }
    </style>
    <script type="text/javascript">
      var jsilConfig = {
        manifests: [
          "WebGL_Vertex_Structs.dll",
          "Files/WebGL_Vertex_Structs.csproj"
        ],
        
        readOnlyStorage: true,

        scriptRoot: "",
        libraryRoot: "../Libraries/",
        fileRoot: "Files/",
        contentRoot: "Content/",
        fileVirtualRoot: ""
      };
      
      function runMain () {
        var asm = JSIL.GetAssembly("WebGL_Vertex_Structs");
        asm.WebGL.Page.Load();
      }
    </script>
    <script src="../Libraries/JSIL.js" type="text/javascript"></script>      
    
    <a href="http://jsil.org/"><img src="http://jsil.org/images/jsil_48px.png" alt="JSIL" align="left" border="0"></a>
    <a href="http://learningwebgl.com/blog/?p=684">Based on Lesson 7 from Learning WebGL</a><br>
    <a href="Page.cs">View C# Source Code</a> | <a href="WebGL_Vertex_Structs, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null.js">View Compiled JavaScript</a>
    <hr>

    <canvas id="canvas" style="border: none;" width="500" height="500"></canvas>

    <br>
    <input type="checkbox" id="lighting" checked> Use lighting<br>
    (Use cursor keys to spin the box and <code>Page Up</code>/<code>Page Down</code> to zoom out/in)

    <br>
    <h2>Directional light:</h2>

    <table style="border: 0; padding: 10px;">
        <tr>
            <td><b>Direction&nbsp;</b>
            <td>X: <input type="text" id="lightDirectionX" value="-0.25">
            <td>Y: <input type="text" id="lightDirectionY" value="-0.25">
            <td>Z: <input type="text" id="lightDirectionZ" value="-1.0">
        </tr>
        <tr>
            <td><b>Color&nbsp;</b>
            <td>R: <input type="text" id="directionalR" value="0.8">
            <td>G: <input type="text" id="directionalG" value="0.8">
            <td>B: <input type="text" id="directionalB" value="0.8">
        </tr>
    </table>

    <h2>Ambient light:</h2>
    <table style="border: 0; padding: 10px;">
        <tr>
            <td><b>Color&nbsp;</b>
            <td>R: <input type="text" id="ambientR" value="0.2">
            <td>G: <input type="text" id="ambientG" value="0.2">
            <td>B: <input type="text" id="ambientB" value="0.2">
        </tr>
    </table>
</body>

</html>
